<template>
    <div class="shopcart">
        <ul>
            <li v-for="item in shopcart" :key="item.id">
                <img :src="item.src">
                <div>
                    <p>{{item.title}}*{{item.num}}</p>
                    <p>￥ {{item.price}}</p>
                    <p><button @click="del(item)">删除</button></p>
                </div>
            </li>
        </ul>
        <p v-if="shopcart.length">商品总价:￥ {{totalPrice}}</p>
        <p v-else>购物车暂无商品</p>
    </div>
</template>
<script>
import { mapState,mapGetters } from 'vuex'
export default{
    name:"shopCart",
    // computed:{
    //     shopcart(){
    //         return this.$store.state.shopcart
    //     },
    //     totalPrice(){
    //         return this.$store.getters.totalPrice
    //     }
    // }
    //vuex提供了mapState辅助函数，可以简化computed计算属性的写法
    computed:{
        ...mapState(['shopcart']),
        ...mapGetters(['totalPrice'])
    },
    methods:{
        del(item){
            this.$store.commit('del',item)
        }
    }
}
</script>
<style scoped>
    .shopcart{
        width: 100%;
        padding-bottom: 50px;
    }
    li{
        position: relative;
        border-bottom: 1px dashed #ccc;
        padding: 5px;
    }
    li div{
        display: inline-block;
        position: absolute;
        top: 10px;
        width: 120px;
        line-height: 30px;
        font-size: 14px;
    }
    img{
        width: 100px;
        border: 1px solid #ccc;
        margin:10px 10px 8px 10px;
    }
    li div p:nth-child(2){
        color: #f00;
    }
    button{
        color: white;
        background: coral;
        border:none;
        padding: 5px;
    }
</style>
